<template>
  <div class="main">
    <div class="top">
      <div class="user_title">
        <el-avatar :src="user.avatar"></el-avatar>
        <span style="margin-left: 10px"> {{ user.username }}</span>
        <div class="user_operator">
          <div @click="quit()" style="border-bottom: 1px solid #dcdfe6">
            <i class="iconfont icon-tuichudenglu"></i> 退出登录
          </div>
          <div @click="resetPwDl = true">
            <i class="iconfont icon-change_password"></i>
            修改密码
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="resetPwDl"
      title="重置密码"
      center
      width="30%"
      :close-on-click-modal="false"
      @close="dialogColse(passwordRef)"
    >
      <el-form
        :model="mdStaInfo"
        :rules="passwordRules"
        ref="passwordRef"
        label-width="auto"
      >
        <el-form-item prop="originalPw" label="原始密码:">
          <el-input
            v-model="mdStaInfo.originalPw"
            placeholder="请输入原始密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="changePw" label="修改密码:">
          <el-input
            type="password"
            v-model="mdStaInfo.changePw"
            placeholder="请输入修改的密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="reConfirmPw" label="确认密码:">
          <el-input
            type="password"
            v-model="mdStaInfo.reConfirmPw"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button type="primary" @click="changePW(passwordRef)">
            修改
          </el-button>
          <el-button @click="resetPwDl = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="body">
      <div class="menu">
        <el-menu
          default-active="/main/takeout/category"
          router
          unique-opened="true"
        >
          <router-link to="/main/takeout/category">
            <el-menu-item
              index="/main/takeout/category"
              style="border-bottom: 1px solid #ddd"
            >
              <el-icon class="iconfont icon-diancan icon"></el-icon>
              <template #title>点餐</template>
            </el-menu-item>
          </router-link>

          <el-menu-item
            index="/main/shoppingCart"
            style="border-bottom: 1px solid #ddd"
          >
            <el-icon class="iconfont icon-gouwucheman icon"></el-icon>
            <template #title>购物车</template>
          </el-menu-item>

          <el-sub-menu index="2" style="border-bottom: 1px solid #ddd">
            <template #title>
              <el-icon
                style="font-size: 20px"
                class="iconfont icon-waimaidingdan0101 icon"
              ></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item
              index="/main/order"
              style="padding-left: 70px; border-top: 1px solid #ddd"
            >
              <template #title></template>订单列表</el-menu-item
            >

            <el-menu-item index="/main/orderCount" style="padding-left: 70px">
              <template #title></template>订单统计</el-menu-item
            >

            <!-- <el-menu-item
              style="padding-left: 70px"
              index="/main/order/orderFK"
            >
              <template #title></template>订单反馈</el-menu-item
            > -->
          </el-sub-menu>

          <el-menu-item
            index="/main/account"
            style="border-bottom: 1px solid #ddd"
          >
            <el-icon class="iconfont icon-qianbaoguanli icon"></el-icon>
            <template #title>账户管理</template></el-menu-item
          >

          <el-sub-menu index="4" style="border-bottom: 1px solid #ddd">
            <template #title>
              <el-icon
                style="font-size: 20px"
                class="iconfont icon-icon7 icon"
              ></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item
              index="/main/personalCenter"
              style="padding-left: 70px; border-top: 1px solid #ddd"
            >
              <template #title></template>个人中心</el-menu-item
            >

            <el-menu-item
              index="/main/personalCenter/address"
              style="padding-left: 70px"
            >
              <template #title></template>收货地址</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="detail">
        <div class="details">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import router from "@/router/index";
import { reactive, toRefs } from "vue";
import { displayBoxInfo } from "@/utils/msg";
import { resetPw } from "@/api/userRegister";
export default {
  name: "main",
  setup() {
    const checkpw = (rules, value, callback) => {
      if (value !== data.mdStaInfo.changePw) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    let data = reactive({
      user: JSON.parse(localStorage.getItem("userInfo")),
      resetPwDl: false,
      passwordRef: "",
      mdStaInfo: {
        id: "",
        originalPw: "",
        changePw: "",
        reConfirmPw: "",
      },
      passwordRules: {
        originalPw: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
        ],
        changePw: [
          { required: true, message: "请输入修改的密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
        ],
        reConfirmPw: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { pattern: /^\S{6,}$/, message: "密码不能小于6位", trigger: "blur" },
          { validator: checkpw, trigger: "blur" },
        ],
      },
    });
    let toDefalut = () => {
      router.push({ path: "/main/takeout/category" });
    };

    //修改密码操作
    let changePW = (formEl) => {
      if (!formEl) return;
      formEl.validate((valid, fields) => {
        if (valid) {
          let params = {
            id: data.user.id,
            originalPw: data.mdStaInfo.originalPw,
            changePw: data.mdStaInfo.changePw,
          };
          resetPw(params).then((res) => {
            displayBoxInfo(res.code, res.msg);
            if (res.code == 1) {
              data.resetPwDl = false;
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    //实现重置和清除校验结果
    let dialogColse = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    let quit = () => {
      router.push({ name: "login" });
    };
    // toDefalut();

    return { ...toRefs(data), toDefalut, quit, changePW, dialogColse };
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  background: #f4f6f8;
}

.top {
  height: 62px;
  border: 1px solid #f0eeee;
  background: #fff;
}

.user_title {
  float: right;
  /* border: 1px solid red; */
  height: 60px;
  position: absolute;
  right: 30px;
  align-items: center;
  display: flex;
  cursor: pointer;
}

.user_operator {
  z-index: 2;
  display: none;
  position: absolute;
  top: 62px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  width: 100%;
  text-align: center;
  border-radius: 4px;
  transform-origin: center top 0px;
}

.user_operator > div {
  padding: 8px 8px;
}
.user_title:hover .user_operator {
  display: block;
}

.body {
  /* border: 1px solid red; */
  margin: 20px 12%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.bottom {
  border: 1px solid #f0eeee;
  background: #fff;
  height: 50px;
}

.menu {
  /* float: left; */
  flex-shrink: 0;
  border: 1px solid #f0eeee;
  width: 240px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 12px 0 #e0e0eb;
  height: 500px;
}

.detail {
  /* height: 100%; */
  /* height: calc(100% - 142px); */
  flex: 1;
  min-width: 0;
  border: 1px solid #f0eeee;
  background: #fff;
  box-shadow: 0 3px 12px 0 #e0e0eb;
  border-radius: 4px;
  min-height: calc(800px - 32px);
}

.details {
  background: #ffffff;
  /* min-height: calc(100% - 142px); */
}

.el-menu{
  border-right:none !important
}

.el-menu-item {
  padding-left: 20px;
}

.el-menu-item:hover {
  background-color: #6598fe;
  color: #fff !important ;
}

.el-menu-item:hover .el-icon {
  color: #fff !important;
}

::v-deep .el-sub-menu__title:hover {
  background-color: #6598fe !important;
  color: #fff !important;
}

.el-sub-menu__title:hover .el-icon {
  color: #fff !important;
}

.icon {
  padding-left: 20px;
  color: #6598fe !important;
}

.menuTitle {
  border: 1px solid red;
  margin-bottom: 20px;
}

</style>